import React,{useState,useEffect} from 'react'
import {  Form, Input,Popup} from 'antd-mobile'
import { Area,Switch,Toast } from 'react-vant';
import { Passed } from '@react-vant/icons'
import { areaList } from '@vant/area-data'
import { sleep } from 'antd-mobile/es/utils/sleep'
import axios from 'axios'
import HeaderNav from '../../../../../components/ayq/HeaderNav'
import './index.less'

export default function Adaddress() {
  const [visible, setVisible] = useState(false)
  const [form1] = Form.useForm()

  // 处理地区
  const area = (v,s)=>{
    let areaArr = []
    s.forEach(item=>{
      areaArr.push(item.text)
    })
    form1.setFieldValue('region',areaArr.join('/'))
    setVisible(false)
  }

  const onFinish = async (item)=>{
    Toast({
      message: '添加成功',
      icon: <Passed  />,
      duration: 1100,
    })
    const {data} = await axios.post("http://localhost:3000/adaddress",item)
    if(data.code === 200){
      await sleep(1200)
      history.go(-1)
    }
  }
  return (
    <div className='adaddress'>
      <HeaderNav title="新增地址"/>
      <div className='address-body'>
        <Form layout='horizontal' form={form1} onFinish={onFinish}>
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder='收货人姓名' />
          </Form.Item>
          <Form.Item
            name='tel'
            label='电话'
            rules={[{ required: true, message: '电话不能为空' },
            { pattern: /^1[3-9]\d{9}$/, message: '电话格式不正确'}]}
          >
            <Input placeholder='收货人手机号' />
          </Form.Item>
          <Form.Item
            name='region'
            label='地区'
            rules={[{ required: true, message: '地区不能为空' }]}
            onClick={()=>{setVisible(true)}}
          >
            <Input placeholder='选择省/市/区'/>
          </Form.Item>
          <Form.Item
            name='detailaddr'
            label='详细地址'
            rules={[{ required: true, message: '详细地址不能为空' }]}
          >
            <Input placeholder='街道门号、楼层房间号等信息' />
          </Form.Item>
          <Form.Item
            name='ems'
            label='邮政编码'
            rules={[{ required: true, message: '邮政编码不能为空' }]}
          >
            <Input placeholder='邮政编码' />
          </Form.Item>
          
        </Form>
        <Form layout='horizontal' form={form1} onFinish={onFinish}>
          <Form.Item
              name='default'
              label='设置默认收货地址'
              childElementPosition='right'
              className='formitem'
              initialValue='false'
            >
              <Switch size="24px" activeColor="#55A034"/>
          </Form.Item>
        </Form>
      </div>
      <div className='address-btom'>
        <button onClick={() => form1.submit()}>保存</button>
      </div>
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
        onClose={() => {
          setVisible(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <Area title='标题' areaList={areaList} onConfirm={(v,s) => area(v,s)} />
      </Popup>
    </div>
  )
}
